{% extends "base.html" %}
{% block title %}用户登录{% endblock %}

{% block extra_css %}
<style>
    .auth-card {
        width: 550px;
        height: 950px;
        margin: 0 auto 1rem; 
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
        overflow: hidden;
    }

    .auth-header {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        padding: 2rem;
        color: white;
        text-align: center;
        margin-bottom: 2rem;
    }

    .form-control {
        border-radius: 12px;
        padding: 0.75rem 1.25rem;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }

    .role-select {
        position: relative;
    }

    .role-select::after {
        content: "▼";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6366f1;
    }

    .submit-btn {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        border: none;
        padding: 1rem;
        font-size: 1.1rem;
        transition: transform 0.3s ease;
    }

    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    .auth-link {
        color: #6366f1;
        text-decoration: none;
        position: relative;
    }

    .auth-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: #6366f1;
        transition: width 0.3s ease;
    }

    .auth-link:hover::after {
        width: 100%;
    }
    @media (max-width: 768px) {
    .auth-card {
        width: 95% !important;
        height: auto;
        margin-top: 2rem;
    }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center min-vh-100 align-items-start">
        <div class="col-md-6 col-lg-4">
            <div class="auth-card">
                <div class="auth-header">
                    <h3 class="mb-0"><i class="fas fa-fingerprint me-2"></i>欢迎回来</h3>
                    <p class="mb-0 mt-2 opacity-75">请验证您的身份</p>
                </div>
                
                <div class="card-body px-4">
                    <form method="POST">
                        <div class="mb-4">
                            <label class="form-label fw-bold">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text bg-transparent">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" name="username" 
                                       class="form-control"
                                       placeholder="username"
                                       required>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">密码</label>
                            <div class="input-group">
                                <span class="input-group-text bg-transparent">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" name="password" 
                                       class="form-control"
                                       placeholder="••••••••"
                                       required>
                            </div>
                        </div>

                        <div class="mb-4 role-select">
                            <label class="form-label fw-bold">身份选择</label>
                            <select class="form-select" name="role" required>
                                <option value="">请选择身份</option>
                                <option value="teacher">👨🏫 教师</option>
                                <option value="student">🎓 学生</option>
                                <option value="parent">👪 家长</option>
                            </select>
                        </div>

                        <button type="submit" class="btn submit-btn w-100 text-white">
                            <i class="fas fa-sign-in-alt me-2"></i>立即登录
                        </button>
                    </form>

                    <div class="text-center mt-4">
                        <a href="/register" class="auth-link">
                            立即加入我们 <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}